<template>
<PanelHead/>
    <el-table :data="tableData.list">
    <el-table-column prop="id" label="id" />
    <el-table-column prop="name" label="昵称" />
    <el-table-column prop="permissions_id" label="所属组别" >
      <template #default="scope">
            {{PermissionName(scope.row.permissions_id)}}
      </template>
    </el-table-column>
    <el-table-column prop="mobile" label="手机号" />
    <el-table-column prop="active" label="状态" >
      <template #default="scope">
         <el-tag :type="scope.row.active? 'success':'danger'">{{scope.row.active?'正常':'失效'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="active" label="创建时间" >
      <template #default="scope">
    <div class="flex-box">
      <el-icon><Clock/></el-icon>
      <span style="margin-left: 10px;">{{scope.row.create_time}}</span>
    </div>

      </template>
    </el-table-column>
 
    <el-table-column  label="操作" >
      <template #default="scope">
          <el-button type="primary" @click="open(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-info"> 
    <el-pagination
       v-model:current-page="paginationData.pageNum" 
       :page-size="paginationData.pageSize"
       :background="false"
       size="small"
       layout="total, prev, pager, next"
       :total="tableData.total"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
    />
  </div>

<el-dialog
  v-model="dialogFromVisable"
  :before-close="beforeClose"
  title="添加权限"
  width="500px"
>
  <el-form
    ref="formRef"
    label-width="100px"
    label-position="left"
    :model="form"
    :rules="rules"
   
  >
    <!-- 手机号表单项 -->
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="form.mobile" disabled style="width: 240px" />
    </el-form-item>
    <!-- 昵称表单项 -->
    <el-form-item label="昵称" prop="name">
      <el-input v-model="form.name" style="width: 240px" />
    </el-form-item>
    <!-- 菜单权限表单项 -->
    <el-form-item label="菜单权限" prop="permissions_id">
      <el-select
        v-model="form.permissions_id"
        placeholder="请选择菜单权限"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFromVisable = false">取消</el-button>
      <el-button type="primary" @click="confirm(formRef)">确认</el-button>
    </div>
  </template>
</el-dialog>
  </template>
  
  <script setup>
 
import {authAdmin, menuSelectList,updateUser}from '../../../api'
  import {reactive,onMounted,ref} from 'vue'
  import dayjs from 'dayjs'
import { formProps } from 'element-plus'
// 分页数据
const paginationData = reactive({
  pageNum: 1,
  pageSize: 10
});

// 表格数据
const tableData = reactive({
  list: [],
  total: 0
});

// 权限选项
const options = ref([]);

// 初始化加载数据
onMounted(() => {
  getListData();
  menuSelectList().then((response) => {
    options.value = response.data?.data || [];
  });
});

// 获取列表数据
const getListData = () => {
  authAdmin(paginationData)
    .then((response) => {
      const { list = [], total = 0 } = response.data?.data || {};
      list.forEach(item => {
        item.create_time = dayjs(item.create_time).format('YYYY-MM-DD');
      });
      tableData.list = list;
      tableData.total = total;
    })
    .catch((error) => {
      console.error('请求失败:', error);
    });
};

// 分页事件
const handleSizeChange = (val) => {
  paginationData.pageSize = val;
  getListData();
};
const handleCurrentChange = (val) => {
  paginationData.pageNum = val;
  getListData();
};

// 对话框控制
const dialogFromVisable = ref(false);
const formRef = ref();
const form = reactive({
  id: '',       // 新增用户ID字段
  mobile: '',
  name: '',
  permissions_id: ''
});

// 表单规则
const rules = reactive({
  name: [{ required: true, message: '请填写昵称', trigger: 'blur' }],
  permissions_id: [{ required: true, message: '请选择菜单权限', trigger: 'blur' }]
});

const confirm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate();
  const { id, name, permissions_id } = form;
  const data = await updateUser({ id, name, permissions_id });
  if (data.data.code === 10000) {
    dialogFromVisable.value = false;
    //await 
    getListData();
    console.log('用户信息更新成功');
  }
};

// 打开编辑对话框
const open = (rowData) => {
  dialogFromVisable.value = true;
  Object.assign(form, {
    id: rowData.id,        // 绑定用户ID
    mobile: rowData.mobile,
    name: rowData.name,
    permissions_id: rowData.permissions_id
  });
};

// 权限名称映射
const PermissionName = (id) => {
  const data = options.value.find(el => el.id === id);
  return data ? data.name : '超级管理员';
};
// 


  

  </script>
  
  <style lang="less" scoped>
  .flex-box{
    display: flex;
    align-items: center;

 
  }
    </style>
    